import { emptyStyle, getStyle } from '../utils/style'
import { makeSetter } from '../utils/tools'
import css from './runtime.less'
export default {
  '@init'({ style, data }) {
    style.height = 'auto'
    style.width = '100%'
    data.styleContent = emptyStyle
    data.style = {}
  },
  '@resize': {
    options: ['width', 'height']
  },
  ':root': {
    style: [
      {
        title: '容器样式',
        catelog: '默认',
        options: ['border', 'padding', 'BoxShadow', 'font', 'background'],
        target: `.${css['box']}`
      }
    ],
    items: ({ data, slot, env }: any, cate1, cate2, cate3) => {
      cate1.items = [
        {
          title: '多层级',
          description: '多层级',
          type: 'Array',
          options: {
            addText: '添加层级',
            getTitle: ({ title }) => {
              return env.i18n(title)
            },
            onAdd: (id) => {
              const newSlot = {
                id,
                zIndex: 0,
                title: `层级${(data?.layerList?.length ?? 0) + 1}`
              }
              slot.add(id, newSlot.title)
              return newSlot
            },
            items: [
              {
                title: '状态名称',
                type: 'text',
                description: '状态的名称，语义化区分不同状态',
                value: 'title'
              },
              {
                title: 'zIndex',
                type: 'InputNumber',
                options: [{ min: 0, max: 10000, width: 100 }],
                value: 'zIndex'
              }
            ]
          },
          value: {
            get({ data }: any) {
              return data.layerList
            },
            set({ data, slot }: any, options) {
              data.layerList = options
            }
          }
        }
      ]
      cate2.title = '高级'
      cate2.items = [
        {
          title: '淡入淡出',
          items: [
            {
              title: '启用',
              type: 'switch',
              value: makeSetter('enableFade')
            },
            {
              title: 'threshold',
              type: 'InputNumber',
              options: [{ min: 0, max: 1, width: 100 }],
              value: makeSetter('threshold')
            },
            {
              title: '淡入',
              type: '_event',
              options: {
                outputId: 'onFadeIn'
              },
              ifVisible({ data }: any) {
                return data.enableFade
              }
            },
            {
              title: '淡出',
              type: '_event',
              options: {
                outputId: 'onFadeOut'
              },
              ifVisible({ data }: any) {
                return data.enableFade
              }
            }
          ]
        }
      ]
    }
  },
}
